<template>
  <div class="container">
    <div class="header">
      <div class="logo-area">
        <img src="@/assets/brand-logo.png" alt="">
      </div>
      <div class="edit-area">
        <component class="user-icon" :is="getIconComponent('User')" @click="handleClickUserIcon"></component>
        <div class="edit-card" v-if="showUserEditCard">
          <div class="edit-card-item">{{ userInfo.username }}</div>
          <div class="edit-card-item">修改个人信息</div>
          <div class="edit-card-item">修改密码</div>
          <div class="edit-card-item">
            <component class="icon" :is="getIconComponent('Back')"></component>
            <span @click="handleLogout">退出</span>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="gl-menu">
        <el-scrollbar>
          <el-menu :default-active="activeMenuIndex" :router="true" style="height: 100%;">
            <div class="gl-menu-container" v-for="(menu) in menuRender">
              <div class="gl-menu-item" v-if="menu.subMenu.length > 0">
                <el-sub-menu :index="menu.routeIndex">
                  <!-- 子标签的名称 -->
                  <template #title>
                    <component class="gl-menu-icon" :is="getIconComponent(menu.iconName)"></component>
                    {{ menu.menuName }}
                  </template>
                  <!-- 子标签项 -->
                  <el-menu-item v-for="(subMenu) in menu.subMenu" :index="`${subMenu.routeIndex}`">
                    <component class="gl-menu-icon" :is="getIconComponent(subMenu.iconName)"></component>
                    {{ subMenu.menuName }}
                  </el-menu-item>
                </el-sub-menu>
              </div>
              <div class="gl-menu-item" v-else>
                <el-menu-item :index="menu.routeIndex">
                  <component class="gl-menu-icon" :is="getIconComponent(menu.iconName)"></component>
                  {{ menu.menuName }}
                </el-menu-item>
              </div>
            </div>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="route-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { useStore } from 'vuex';
const store = useStore()
import { Local } from '@/utils/storage';
import { handleApiError, API } from '@/api';
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const getIconComponent = (iconName) => ElementPlusIconsVue[iconName];

// 左侧菜单相关逻辑
const activeMenuIndex = computed(() => store.state.activeMenuIndex)
const menuRender = ref([])
const generateMenuRender = (routes, fatherPath) => {
  if (!Array.isArray(routes)) {
    throw new Error("routes 应该为数组");
  }
  return routes.map((routeItem) => {
    if (!routeItem.path) {
      throw new Error("routeItem 应该有path");
    }
    const menuItem = {
      routeIndex: fatherPath ? `${fatherPath}/${routeItem.path}` : routeItem.path,
      iconName: routeItem.iconName || 'Memo',
      menuName: routeItem.meta && routeItem.meta.menuName ? routeItem.meta.menuName : 'default',
      subMenu: []
    };
    if (routeItem.children && Array.isArray(routeItem.children) && routeItem.children.length > 0) {
      menuItem.subMenu = generateMenuRender(routeItem.children, routeItem.path);
    }
    return menuItem;
  });
};

// 右上角用户数据卡相关逻辑
const showUserEditCard = ref(false)
const userInfo = ref()
const handleClickUserIcon = () => {
  showUserEditCard.value = !showUserEditCard.value
}

const handleLogout = () => {
  handleApiError(async () => {
    await API.user.logout()
    store.commit('cleanUserInfo')
    Local.remove('token')
    ElMessage({
      message: "退出登录成功",
      type: "success",
      duration: 1500,
    });
    router.push({ name: "login" })
  })
}

onMounted(() => {
  const routes = router.options.routes
  menuRender.value = generateMenuRender(routes.length && routes[0].children)
  userInfo.value = store.state.userInfo
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  $headerHeight: 5.8%;
  $menuWidth: 16%;

  .header {
    width: 100%;
    height: $headerHeight;
    min-height: $headerHeight;
    background-color: var(--cover-color);
    display: flex;

    .logo-area {
      height: 100%;
      width: $menuWidth;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 60%
      }
    }

    .edit-area {
      $zIndex: 1000;
      width: 100px;
      height: 100%;
      margin-left: auto;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: $zIndex;

      .user-icon {
        cursor: pointer;
        width: 1.3rem;
        height: 1.3rem;
        color: var(--second-text-color)
      }

      .edit-card {
        position: absolute;
        width: 120px;
        top: calc(100% - 10px);
        right: 0px;
        background-color: var(--background-color);
        border-radius: var(--sub-radius);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

        .edit-card-item {
          cursor: pointer;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid whitesmoke;

          .icon {
            width: 1rem;
            height: 1rem;
          }

          &:last-child {
            cursor: unset;
            border-bottom: unset;
            justify-content: flex-end;
            color: var(--second-text-color);
            padding-right: 2px;

            span {
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .body {
    width: 100%;
    height: calc(100% - $headerHeight);
    background-color: var(--background-color);
    $margihHeight: 2px;
    display: flex;

    .gl-menu {
      margin-top: $margihHeight;
      height: calc(100% - $margihHeight);
      width: $menuWidth;
    }

    .route-area {
      margin-top: $margihHeight;
      height: calc(100% - $margihHeight);
      width: calc(100% - $menuWidth);
      background-color: var(--background-color);
      padding-top: var(--background-height-padding);
      padding-bottom: 5px;
      padding-left: var(--background-width-padding);
      padding-right: var(--background-width-padding);

      &>div {
        background-color: var(--sub-background-color);
        box-shadow: var(--sub-box-shadow);
        border-radius: var(--sub-radius);
      }
    }
  }
}
</style>

<style lang="scss">
@import '/src/style/menu.scss';
</style>
